<template>
  <div class="app-container" ref="appContainer">

   </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

const appContainer = ref<HTMLElement | null>(null)

let webviewId = 'kuaishou'
onMounted(() => {
  if (appContainer.value) {
    const bounds = { left:172, top:1, right:16, bottom: 38 };
    globalThis.electronApi.openWebview('https://www.kuaishou.com/',{
      id: webviewId,
      bounds: bounds
    },{
      links: ['/rest/v/feed/hot'],
      script: `

      const btn = document.createElement('button');
      btn.id = 'read-source-btn';
      btn.textContent = '采样';
      Object.assign(btn.style, {
        position: 'fixed',
        top: '180px',
        right: '32px',
        zIndex: 2147483647, /* 尽量在最上层 */
        padding: '8px 12px',
        fontSize: '13px',
        borderRadius: '6px',
        border: '1px solid rgba(0,0,0,0.12)',
        background: 'white',
        boxShadow: '0 6px 18px rgba(0,0,0,0.12)',
        cursor: 'pointer'
      });


      // 悬停样式
      btn.addEventListener('mouseenter', () => btn.style.transform = 'translateY(-1px)');
      btn.addEventListener('mouseleave', () => btn.style.transform = 'none');


      // 点击时获取页面源码并在新窗口展示
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        e.preventDefault();


        // 获取页面完整 HTML
        const html = document.documentElement.outerHTML;
        console.log(html);

      });

      // 把按钮插入页面
      document.documentElement.appendChild(btn);
       /**
          const event = new KeyboardEvent('keyup', {
            key: 'ArrowDown',
            code: 'ArrowDown',
            keyCode: 40,
            which: 40,
            bubbles: true,
            cancelable: true
          });

          setInterval(()=>{
            const videos = document.querySelectorAll('.kplayer-video');
            if(videos.length == 3){
              const videoUrl = videos[1].src;
              //alert(videoUrl);

            }

            document.body.dispatchEvent(event);
          }, 3000);
        */
          `
    })
  }

})

onUnmounted(() => {
    globalThis.electronApi.closeWebview(webviewId);
})
</script>

<style lang="scss" scoped>
.app-container{
  display: flex;
  flex-direction: column;
}


</style>
